<template>
  <div class="pagebody">
    <StickHead></StickHead>
    <div class="headtop bgfff text-al-center fz30">资讯详情</div>
    <div class="toptitle">
      <div class="top borderbox flex-row justify-between align-center">
        <div class="top_left flex-row align-center">
          <div class="clise"></div>
          <div class="top_left_text fz24 ml16">{{ news.newsUnit }}</div>
        </div>
        <div v-if="lock" class="top_right flex-row fz24 align-center">
          {{ news.createTime.slice(0, 10) }}
        </div>
      </div>
      <div class="bot fz28 fwbold mt10">
        {{ news.newsTitle }}
      </div>
    </div>
    <div
      class="newscontent bgfff fz24 borderbox"
      v-html="news.newsContent"
    ></div>
    <div class="file">
      <div class="fz24 mt15 color666"> 相关附件</div>
    <el-upload
      class="upload-demo"
      
      :on-preview="handlePreview"
      multiple
      :file-list="filearr"
    >
    </el-upload>
    </div>
    
    <StickFoot :type="'news'"></StickFoot>
  </div>
</template>

<script>
import StickHead from "@/layout/StickHead.vue";
import StickFoot from "@/layout/StickFoot.vue";
import { getnewsDetail } from "@/api/api";
export default {
  name: "newsdetails",
  components: {
    StickHead,
    StickFoot,
  },

  data() {
    return {
      lock: false,
      news: {},
      filearr: [],
      //uploadUrl: "http://127.0.0.1:8888/api/upload1",
    };
  },
  mounted() {
    this.getnews();
  },
  methods: {
    getnews() {
      let id = this.$route.params.id;
      getnewsDetail(id).then((res) => {
        this.news = res.data.data;
        this.filearr = this.news.attachFiles;
        this.lock = true;
      });
    },
    handlePreview(file) {
      const x = new window.XMLHttpRequest()
      x.open('GET', file.url, true)
      x.responseType = 'blob'
      x.onload = () => {
        const url = window.URL.createObjectURL(x.response)
        const a = document.createElement('a')
        a.href = url
        a.download = file.name
        a.click()
      }
      x.send()

    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .van-uploader__upload {
  display: none;
}
::v-deep .el-upload {
  display: none;
}
.file{
  background-color: #ffffff;
  padding: 0.2rem;

}
.pagebody {
  padding-bottom: 1rem;
  background-color: #f6f8fb;
  .headtop {
    line-height: 0.8rem;
    height: 0.8rem;
  }
  .toptitle {
    padding: 0.3rem 0;
    background: #f5f6fa;
    .top {
      height: 0.5rem;
      padding-right: 0.24rem;
      .top_left {
        .clise {
          width: 0.2rem;
          height: 0.5rem;
          background: #288ff4;
        }
        .top_left_text {
          color: #6c6d71;
        }
      }
      .top_right {
        color: #6c6d71;
      }
    }
    .bot {
      color: #288ff4;
      padding: 0 0.24rem;
    }
  }
  .newscontent {
    padding: 0.24rem;
    line-height: 0.48rem;
  }
  ::v-deep .newscontent img {
    width: -webkit-fill-available;
  }
}
</style>